import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ira-panel',
  templateUrl: './ira-panel.component.html',
  styleUrls: ['./ira-panel.component.scss']
})
export class IraPanelComponent implements OnInit {
  chartOpt1: any = {
    backgroundColor: '#ffffff',
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      top: 40,
      left: '5%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '唐徕渠',
          '西干渠',
          '惠农渠',
          '汉延渠',
          '秦汉渠',
          '渠首',
          '七星渠',
          '宁西公司',
          '沙坡头',
          '固海扬水',
          '红寺堡',
          '盐环定'
        ],
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: 12
          },
          formatter: (value) => {
            return value.split("").join("\n");
          }
          // rotate: 60
        }
      }
    ],
    yAxis: [
      {
        name: '灌区面积(万亩)',
        type: 'value'
      }
    ],
    series: [
      {
        name: '灌溉面积',
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        // barWidth: '60%',
        data: [123.1, 70.6, 113.7, 46.1, 100.9, 23.4, 30.8, 18.2, 51.8, 94.9, 48.6, 21.6]
      }
    ]
  };
  chartOptChange1: any = {};
  chartOpt2: any = {
    backgroundColor: '#ffffff',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    color: ['#81d5ef', '#7980f1', '#0d83bf', '#89b0ae', '#4b707b'],
    legend: {
      bottom: 0,
      data: ['用水量', '灌溉面积']
    },
    grid: {
      top: 20,
      left: '5%',
      right: '4%',
      bottom: 30,
      containLabel: true
    },

    xAxis: [
      {
        type: 'category',
        data: ['唐徕渠', '西干渠', '惠农渠', '汉延渠', '秦汉渠', '渠首', '七星渠', '宁西公司', '沙坡头', '固海扬水', '红寺堡扬水', '盐环定扬水'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        name: '',
        type: 'value',
        splitNumber: 5
      }
    ],
    dataZoom : [
      {
        type: 'inside',
        show: true,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        bottom: 0
      },
    ],
    series: [
      {
        name: '用水量',
        type: 'bar',
        barGap: 0,
        yAxisIndex: 0,
        data: [1.48, 1.83, 0.9, 0.85, 1.17, 0.38, 1.17, 0.24, 0.54, 0.25, 0.05, 0.15]
      },
      {
        name: '灌溉面积',
        type: 'bar',
        yAxisIndex: 1,
        data: [58.28, 82.61, 40.49, 50, 71.46, 12.26, 71.46, 16.53, 49.95, 23.83, 4.2, 10.4]
      }
    ]
  };
  pieOptChange2: any = {};
  pieOpt3: any = {
    backgroundColor: '#ffffff',
    color: ['#6084fd', '#8abe78', '#69c0fe'],
    grid: {
      top: 20,
      left: '3%',
      right: 30,
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'value',
      show: false,
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: ['唐徕渠', '西干渠', '惠农渠', '汉延渠', '河东总干渠', '秦渠', '汉渠', '马莲渠', '东干渠', '河西总干渠', '泰民渠', '大清渠', '美利渠', '七星渠', '跃进渠', '北干渠', '南干渠', '泉眼山泵站', '大战场泵站', '固扩一泵站', '红一泵站', '黄河水源泵站', '盐环一泵站'].reverse(),
      axisLabel: {
        interval: 0
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        stack: 'process',
        barWidth: '40%',
        z: 3,
        label: {
          normal: {
            position: 'right',
            formatter: '{c}',
            show: true
          },
        },
        itemStyle: {
          color: params => {
            const colorList = ['#6084fd', '#8abe78', '#69c0fe'];
            return colorList[params.dataIndex % 3];
          }
        },
        data: [75.2, 34.9, 94, 30, 70, 50.3, 4.99, 10, 46, 290, 4.1, 14.1, 29.6, 56.7, 24, 29.6, 11.8, 19.9, 8.9, 12.3, 24.9, 16.4, 10.6 ].reverse()
      }
    ]
  };
  pieOptChange3: any = {};

  constructor() { }

  ngOnInit(): void {
  }

}
